<template>
  <Teleport to="body">
    <div
      :id="'common_modal_' + visible"
      class="common_modal"
      :class="{ visible }"
      @click="handleClose"
    >
      <CloseOutlined v-if="!hideClose" class="close_icon" @click="handleClose" />
      <div @click.stop>
        <slot></slot>
      </div>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
import { computed, watch } from 'vue'
import { CloseOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  hideClose: Boolean,
  modelValue: {
    type: Boolean,
    default: false
  }
})

// 关闭弹窗
const emit = defineEmits(['update:modelValue', 'onVisibleChange', 'onClose'])

const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => {
    emit('update:modelValue', value)
  }
})

const handleClose = () => {
  visible.value = false
}

watch(visible, (value: boolean) => {
  emit('onVisibleChange', value)
  if (!value) {
    emit('onClose')
  }
})
</script>

<style>
body:has(#common_modal_true) {
  overflow: hidden;
}
</style>

<style lang="less" scoped>
.common_modal {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;

  &.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .close_icon {
    position: absolute;
    right: 50px;
    top: 50px;
    color: #fff;
    font-size: 28px;
    z-index: 1001;
    cursor: pointer;
  }
}
</style>
